<template>
  <div class="qktools" >
	  <van-tabs animated>
	    <van-tab v-for="(item,index) in title" title-style="font-size:16px" :key="'qktitle_'+index" :title="item.title">
	      <div class="tools_content">
			  
			  <div v-if="item.viewType=='table'">
				  <table class="table" :class="[item.tableStyle]">
					  <tr><th v-for="(th,index2) in item.th" :key="'th_'+index2">{{th}}</th></tr>
					  <tr v-for="(tr,index3) in item.datas" :key="'tr_'+index3">
						  <td class="ts_animate_all" v-for="(td,index4) in tr" :key="'td_'+index4" v-html="td"></td>
					  </tr>
				  </table>
			  </div>
			  
		  </div>
	    </van-tab>
	  </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Cell, CellGroup } from 'vant'

export default {
  name: 'qktools',
  components: {
  	  [Tab.name]:Tab,
	  [Tabs.name]:Tabs,
	  [Cell.name]:Cell,
	  [CellGroup.name]:CellGroup
  },
  data(){
	  return {
		  curItem:0
	  }
  },
  props: {
     title:{
		 type:Array,
		 default:()=>{
			 return []
		 }
	 }
  },
  mounted(){
	  
  },
  methods:{
	  
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.qktools{
	.tools_content{
		padding:10px 20px;
		height: 418px;
		overflow: auto;
	}
	.table{
		width: 100%;
		font-size: 14px;
		tr{
			border-bottom: 1px #bbb solid;
			&:hover{
				td{
					background: #f9f9f9;
				}
			}
		}
		th,td{
			min-height: 20px;
			padding: 7px;
			line-height: 1.8em;
			text-align: left;
		}
		td{
			color: #000;
			&:nth-child(1){
				color: #000;
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
	.table_1{
		th,td{
			&:nth-child(1){
				width: 20%;
			}
			&:nth-child(2){
				width: 60%;
			}
			&:nth-child(3){
				width: 20%;
			}
		}
		
	}
	.table_2{
		th,td{
			&:nth-child(1){
				width: 15%;
			}
			&:nth-child(2){
				width: 85%;
			}
		}
		
	}
	.table_3{
		th,td{
			&:nth-child(1){
				width: 40%;
			}
			&:nth-child(2){
				width: 40%;
			}
			&:nth-child(3){
				width: 20%;
			}
		}
	}
	.table_4{
		th,td{
			&:nth-child(1){
				width: 30%;
			}
			&:nth-child(2){
				width: 70%;
			}
		}
		
	}
}
</style>
